<template>
  <div class="wrapper">
    <el-form ref="searchForm" :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item label="关键字">
        <el-input v-model="searchData.keywords" placeholder="用户id" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="onSearch('searchForm')" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="用户ID" prop="user_id"></el-table-column>
      <el-table-column label="用户名" prop="user_info.name"></el-table-column>
      <el-table-column label="用户昵称" prop="user_info.nickname"></el-table-column>
      <el-table-column label="可用余额/元" prop="cash" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="冻结资金/元" prop="freeze" :formatter="minuteFormat"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="状态" prop="status_text"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <router-link :to="'/assets/fundfreeze/' + scope.row.user_id">
            <el-button type="mini">冻结资金</el-button>
          </router-link>
          <el-button type="mini" @click="recharge(scope.$index, scope.row)">充值资金</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default {
    data () {
      return {
        searchData: {
          keywords: ''
        },
        rules: {}
      }
    },
    created () {
      this.getList()
    },
    computed: {
      ...mapState({
        list: state => state.fund.list,
        pageData: state => state.fund.pageData
      })
    },
    methods: {
      // 获取资金账户列表
      async getList () {
        let payload = {
          page: this.pageData.current_page,
          list_rows: this.pageData.per_page,
          keywords: this.$route.query.keywords
        }
        await this.$store.dispatch('fund/getFundAccountList', payload)
      },
      // 点击页面时，跳转到相应页面
      handleCurrentChange (val) {
        this.pageData.current_page = val
        this.getList()
      },
      recharge (index, row) {
        this.$store.commit('fund/FUND_SAVE_DATA', row)
        this.$router.push('/assets/fundrecharge')
      },
      // 表单搜索
      onSearch (formName) {
        this.$refs[formName].validate((validate) => {
          if (validate) {
            this.$router.push({path: '/assets/fund', query: {keywords: this.searchData.keywords}})
            this.getList()
          }
        })
      },
      // 把分化为元的操作
      minuteFormat (row, column) {
        return Number(row[column.property] / 100)
      }
    }
  }
</script>
